<template>
  <div class="w-full px-4 py-2 border-t border-gray-200 bg-white message-input-container">
    <!-- 图片预览区域 -->
    <div v-if="base64Image" class="mb-2 relative inline-block">
      <img
        :src="base64Image"
        class="w-14 h-14 object-cover rounded-lg border border-gray-300 shadow-sm"
      />
      <button
        @click="clearImage"
        class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center shadow-sm hover:bg-red-600 transition-colors"
      >
        <Icon icon="mdi:close" class="text-xs" />
      </button>
    </div>

    <!-- 输入控件区域 -->
    <div class="flex items-center gap-2">
      <input
        type="file"
        class="hidden"
        ref="inputRef"
        @change="handleInputChange"
        accept="image/*"
      />
      <Icon
        icon="material-symbols:imagesmode-outline"
        class="cursor-pointer h-6 w-6 text-gray-500 hover:text-blue-500 transition-colors"
        :class="{ 'opacity-50 cursor-not-allowed': props.disabled }"
        @click="handleImageClick"
      />
      <input
        v-model="message"
        type="text"
        class="flex-1 h-10 px-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all disabled:opacity-50 disabled:cursor-not-allowed"
        :placeholder="props.placeholder"
        @keyup.enter="sendMessage"
        :disabled="props.disabled"
      />
      <button
        @click="sendMessage"
        class="h-10 w-10 flex items-center justify-center rounded-full bg-blue-500 hover:bg-blue-600 text-white transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
        :disabled="(!message.trim() && !base64Image) || props.disabled"
      >
        <Icon icon="material-symbols:send-outline-rounded" />
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Icon } from '@iconify/vue/dist/iconify.js'

  const props = withDefaults(
    defineProps<{
      placeholder?: string
      disabled?: boolean
    }>(),
    {
      placeholder: '输入消息...',
      disabled: false
    }
  )

  const message = ref('')
  const emits = defineEmits(['sendMessage'])
  const inputRef = ref<HTMLInputElement>()
  const base64Image = ref('')
  const handleImageClick = () => {
    if (props.disabled) return
    inputRef.value?.click()
  }
  let fileName: string | undefined
  const handleInputChange = (e: Event) => {
    const traget = e.target as HTMLInputElement
    const files = traget.files
    if (files && files.length > 0) {
      const imagePath = files[0]
      fileName = imagePath.name
      const reader = new FileReader()
      reader.readAsDataURL(imagePath)
      reader.onload = () => {
        base64Image.value = reader.result as string
      }
    }
  }

  const clearImage = () => {
    base64Image.value = ''
    if (inputRef.value) {
      inputRef.value.value = ''
    }
  }

  const sendMessage = () => {
    if (message.value.trim() || base64Image.value) {
      // 发送消息和图片
      emits('sendMessage', message.value, base64Image.value, fileName)
      message.value = ''
      base64Image.value = ''
    }
  }
</script>

<style scoped>
  .message-input-container {
    min-height: 50px;
    height: auto;
    transition: height 0.3s ease;
  }
</style>
